<template>
  <div>
    <n-data-table :bordered="true" :single-line="true" :columns="columns" :data="data" :pagination="pagination" />
  </div>
</template>

<script setup lang="ts">
import { h, ref, onBeforeMount } from "vue";
import { NTag, NButton, useMessage } from "naive-ui";
import { getRequest } from "../../utils/http.js";
const message = useMessage();

onBeforeMount(async () => {
  const data = await getRequest("http://localhost:3000/menu");
  console.log("----------------", data);
});

const sendMail = rowData => {
  message.info("send mail to " + rowData.name);
};

const pagination = ref({
  pageSize: 10,
});

const columns = [
  {
    title: "Name",
    key: "name",
  },
  {
    title: "Age",
    key: "age",
  },
  {
    title: "Address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    render(row) {
      const tags = row.tags.map(tagKey => {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "info",
          },
          {
            default: () => tagKey,
          }
        );
      });
      return tags;
    },
  },
  {
    title: "Action",
    key: "actions",
    render(row) {
      return h(
        NButton,
        {
          size: "small",
          onClick: () => sendMail(row),
        },
        { default: () => "Send Email" }
      );
    },
  },
];

const data = [
  {
    key: 0,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: 1,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["wow"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
</script>

<style lang="scss" scoped></style>
